<template>
  <el-dialog
    v-model="showDialog"
    :title="popTitle"
    width="500px"
    :destroy-on-close="true"
  >
    <el-form
      ref="formRef"
      v-loading="loading"
      :model="formData"
      :rules="formRules"
      label-width="90px"
      class="page-form"
    >
      <el-form-item :label="t('capacity')" prop="sku">
        <el-input
          v-model.trim="formData.sku"
          :placeholder="t('capacityPlaceholder')"
          type="number"
          clearable
          class="input-width"
        >
          <template #suffix>ml</template>
        </el-input>
      </el-form-item>
      <el-form-item :label="t('deliveryMoney')" prop="deliveryMoney">
        <el-input
          v-model.trim="formData.delivery_money"
          :placeholder="t('deliveryMoneyPlaceholder')"
          type="number"
          clearable
          class="input-width"
        >
          <template #suffix>元</template>
        </el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showDialog = false">{{ t("cancel") }}</el-button>
        <el-button type="primary" :loading="loading" @click="confirm(formRef)">
          {{ t("confirm") }}
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, toRaw } from "vue";
import { t } from "@/lang";
import type { FormInstance } from "element-plus";
import { saveOtherConfig } from "@/app/api/alcohol";
import { deepClone } from "@/utils/common";

const showDialog = ref(false);
const loading = ref(false);
let popTitle: string = "";

/**
 * 表单数据
 */
const index = ref(-1);
const allSku = ref<string[]>([]);
const initialFormData = {
  sku: "",
  delivery_money: "",
};
const formData: Record<string, any> = reactive({ ...initialFormData });
const formRef = ref<FormInstance>();
// 表单验证规则
const formRules = computed(() => {
  return {
    sku: [{ required: true, message: t("capacityPlaceholder"), trigger: "blur" }],
    delivery_money: [
      { required: true, message: t("deliveryMoneyPlaceholder"), trigger: "blur" },
    ],
  };
});

const emit = defineEmits(["complete"]);

/**
 * 确认
 * @param formEl
 */
const confirm = async (formEl: FormInstance | undefined) => {
  if (loading.value || !formEl) return;
  await formEl.validate((valid) => {
    if (valid) {
      loading.value = true;
      if (index.value === -1) {
        allSku.value.push(formData);
      } else {
        allSku.value[index.value] = formData;
      }
      const data = {
        alcohol_sku: JSON.stringify(allSku.value),
      };

      saveOtherConfig(data)
        .then(() => {
          showDialog.value = false;
          emit("complete");
        })
        .finally(() => {
          loading.value = false;
        });
    }
  });
};

const setFormData = (row: any = null) => {
  loading.value = true;
  Object.assign(formData, initialFormData);
  allSku.value = row.data;
  index.value = row.index;
  if (row) {
    popTitle = t("updateCapacity");
    Object.assign(formData, deepClone(row.data[index.value]));
  } else {
    popTitle = t("addCapacity");
  }
  loading.value = false;
};

defineExpose({
  showDialog,
  setFormData,
});
</script>

<style lang="scss" scoped></style>
